<template>
  <div style="width:1100px;margin: 0 auto;height: 100%;">
    <h1 style="font-weight: 600;font-size: 24px;line-height: 34px;padding-top: 24px;padding-bottom: 32px;margin: 0px">
      个人资料编辑</h1>
    <div style="background-color:  #fff;padding: 40px 78px 72px 48px;border-radius: 10px;height: 100%;">
      <div style="float: left;overflow: hidden;width: 50%">
        <div>我的相册</div>
        <div>
          <el-row :gutter="8" style="margin-top: 12px">
            <el-col :span="8">
              <el-upload :action="BASE_URL+'/v1/upload'" name="file" :limit="1" list-type="picture-card"><i
                  class="el-icon-plus"></i></el-upload>
            </el-col>
            <el-col :span="8">
              <el-upload :action="BASE_URL+'/v1/upload'" name="file" :limit="1" list-type="picture-card"><i
                  class="el-icon-plus"></i></el-upload>
            </el-col>
            <el-col :span="8">
              <el-upload :action="BASE_URL+'/v1/upload'" name="file" :limit="1" list-type="picture-card"><i
                  class="el-icon-plus"></i></el-upload>
            </el-col>
          </el-row>
          <el-row :gutter="8" style="margin-top: 12px">
            <el-col :span="8">
              <el-upload :action="BASE_URL+'/v1/upload'" name="file" :limit="1" list-type="picture-card"><i
                  class="el-icon-plus"></i></el-upload>
            </el-col>
            <el-col :span="8">
              <el-upload :action="BASE_URL+'/v1/upload'" name="file" :limit="1" list-type="picture-card"><i
                  class="el-icon-plus"></i></el-upload>
            </el-col>
            <el-col :span="8">
              <el-upload :action="BASE_URL+'/v1/upload'" name="file" :limit="1" list-type="picture-card"><i
                  class="el-icon-plus"></i></el-upload>
            </el-col>
          </el-row>
          <el-row :gutter="8" style="margin-top: 12px">
            <el-col :span="8">
              <el-upload :action="BASE_URL+'/v1/upload'" name="file" :limit="1" list-type="picture-card"><i
                  class="el-icon-plus"></i></el-upload>
            </el-col>
            <el-col :span="8">
              <el-upload :action="BASE_URL+'/v1/upload'" name="file" :limit="1" list-type="picture-card"><i
                  class="el-icon-plus"></i></el-upload>
            </el-col>
            <el-col :span="8">
              <el-upload :action="BASE_URL+'/v1/upload'" name="file" :limit="1" list-type="picture-card"><i
                  class="el-icon-plus"></i></el-upload>
            </el-col>
          </el-row>
        </div>
      </div>
      <div style="float: left;width: 40%;margin-left: 60px">
        <div style="margin-bottom: 6px">
          <span>昵称</span>
          <div style="float: right">
            <i class="el-icon-edit"></i>
          </div>
        </div>
        <div style="margin-bottom: 30px">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div style="margin-bottom: 6px"><span>语音介绍</span></div>
        <div>
          <button
              style="border-radius: 10px;height: 35px;width: 156px;background-color: transparent; border-color: #409eff;">
            <i class="el-icon-microphone"></i>
            <span style="color: #409eff;font-size: 14px;margin-left: 10px">点击开始录音</span>
          </button>
          <span style="margin: 0 32px">或</span>
          <button style="background-color: transparent; border: none;">
            <i class="el-icon-upload"></i>
            <span style="margin-left:10px ;color: #409eff;font-size: 14px">上传文件</span>
          </button>
        </div>
        <div style="color: #8c94aa;font-size: 13px;margin-top: 12px;margin-bottom: 30px">
          请上传3-60秒的录音（支持mp3/wma/m4a，文件大小不超过3M）
        </div>
        <div>
        <div style="margin: 15px 0"><span>文字介绍</span></div>
        <el-collapse accordion>
          <el-collapse-item title="添加文字自我介绍" style="color: #409eff;">
            <el-input
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                maxlength="500"
                show-word-limit>
            </el-input>
            <div>
              <el-button round
                         style="width: 80px;height: 32px;float: right;color: #222c43;background: #fed838;margin: 10px ;line-height: 10px">
                确认
              </el-button>
              <el-button round
                         style="width: 80px;height: 32px;float: right;color: #636d86;background: #e8eaee;margin: 10px 0;line-height: 10px">
                取消
              </el-button>
            </div>
          </el-collapse-item>
        </el-collapse>

        <div style="margin: 15px 0"><span>性别</span></div>
        <el-collapse accordion>
          <el-collapse-item title="添加性别" style="color: #409eff;">
            <el-select v-model="value" placeholder="请选择" style="width: 370px">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
            <div>
              <el-button round
                         style="width: 80px;height: 32px;float: right;color: #222c43;background: #fed838;margin: 10px ;line-height: 10px">
                确认
              </el-button>
              <el-button round
                         style="width: 80px;height: 32px;float: right;color: #636d86;background: #e8eaee;margin: 10px 0;line-height: 10px">
                取消
              </el-button>
            </div>
          </el-collapse-item>
        </el-collapse>

        <div style="margin: 15px 0"><span>出生日期</span></div>
        <el-collapse accordion>
          <el-collapse-item title="添加出生日期" style="color: #409eff;">
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker style="width: 370px"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </div>
            <span style="    margin-top: 12px;font-size: 13px;line-height: 18px;color: #8c94aa;">你的出生日期将不会出现在个人资料里，此应用需要你年满18岁</span>
            <div>
              <el-button round
                         style="width: 80px;height: 32px;float: right;color: #222c43;background: #fed838;margin: 10px ;line-height: 10px">
                确认
              </el-button>
              <el-button round
                         style="width: 80px;height: 32px;float: right;color: #636d86;background: #e8eaee;margin: 10px 0;line-height: 10px">
                取消
              </el-button>
            </div>
          </el-collapse-item>
        </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PersonalView",
  data() {
    return {
      options: [{
        value: '选项1',
        label: '男生'
      }, {
        value: '选项2',
        label: '女生'
      }]
    }
  }
}
</script>

<style scoped>

</style>